<template>
  <div class="box">
      <header class="header">我的</header>
      <div class="content">
        <ul>
          <li v-for="item of bannerList" :key="item.bannerid">
            <img :src="item.img" alt="">
          </li>
        </ul>
        <ul>
          <li v-for="item of proList" :key="item.proid">
            {{ item.proname }}
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { getBannerList, getProList } from '@/api/home'
export default {
  computed: {
    ...mapState({
      bannerList: state => state.home.bannerList,
      proList: state => state.home.proList
    })
  },
  mounted () {
    getBannerList().then(res => {
      // this.$store.commit({
      //   type: 'home/changeBannerList',
      //   payload: res.data.data
      // })
      this.changeBannerList({ payload: res.data.data })
    })
    getProList().then(res => {
      // this.$store.commit('home/changeProList', res.data.data)
      this.changeProList(res.data.data)
    })
  },
  methods: {
    ...mapMutations({
      changeBannerList: 'home/changeBannerList',
      changeProList: 'home/changeProList'
    })
  }
}
</script>
